<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>楼宇管理</title>
    <script src="../js/vue3.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/element-plus.js"></script>
    <script src="../js/icons-vue.js"></script>
    <script src="../js/zh-cn.js"></script>
    <script src="../js/axios-interceptor.js"></script>
    <link rel="stylesheet" href="../css/index.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 30px auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(90deg, #409EFF 0%, #64b5ff 100%);
            color: white;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 24px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .header h1 i {
            font-size: 28px;
        }

        .actions {
            display: flex;
            gap: 15px;
            padding: 20px;
            background: #f9fbfd;
            border-bottom: 1px solid #ebeef5;
        }

        .search-container {
            padding: 20px;
            background: #f9fbfd;
            border-bottom: 1px solid #ebeef5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .table-container {
            padding: 0 20px 20px;
        }

        .pagination-container {
            margin-top: 20px;
            display: flex;
            justify-content: flex-start;
            padding: 0 20px 20px;
        }

        .operation-buttons {
            display: flex;
            gap: 8px;
        }

        .custom-button {
            border-radius: 6px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .custom-table {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .table-header {
            background: #f5f7fa;
            padding: 12px 16px;
            font-weight: 600;
            color: #606266;
        }

        .footer {
            text-align: center;
            padding: 20px;
            color: #909399;
            font-size: 14px;
            border-top: 1px solid #ebeef5;
            background: #f9fbfd;
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #909399;
        }

        .empty-state i {
            font-size: 60px;
            margin-bottom: 15px;
            color: #c0c4cc;
        }

        .empty-state p {
            margin-top: 10px;
        }

        .building-id {
            font-weight: 600;
            color: #409EFF;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-building"></i> 楼宇管理系统</h1>
            <div>欢迎，管理员</div>
        </div>

        <div class="actions">
            <el-button type="primary" class="custom-button" @click="addBuilding">
                <i class="fas fa-plus"></i> 新增楼宇
            </el-button>
            <el-button type="danger" class="custom-button"
                       @click="deleteBuildings">
                <i class="fas fa-trash-alt"></i> 批量删除
            </el-button>
        </div>

        <div class="search-container">
            <el-input
                    v-model="searchQuery"
                    placeholder="请输入楼宇名称进行查询"
                    style="width: 300px"
                    clearable
                    @clear="handleSearch"
                    @keyup.enter="handleSearch">
            </el-input>
            <el-button type="primary" @click="getBuilding">
                <i class="fas fa-search"></i> 查询
            </el-button>
        </div>

        <div class="table-container">
            <el-table
                    :data="buildings"
                    style="width: 100%"
                    class="custom-table"
                    empty-text="暂无数据"
                    @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="楼宇编号" prop="buildingId" sortable width="120">
                </el-table-column>
                <el-table-column label="名称" prop="buildingName" sortable min-width="180">
                    <template #header>
                        <div style="display: flex; align-items: center;">
                            <span>名称</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="单元" prop="location" sortable width="120"></el-table-column>
                <el-table-column label="备注" prop="remark" min-width="200"></el-table-column>
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="scope">
                        <div class="operation-buttons">
                            <el-button size="small" @click="handleEdit(scope.row)">
                                <i class="fas fa-edit"></i> 编辑
                            </el-button>
                            <el-button size="small" type="danger" @click="handleDelete( scope.row)">
                                <i class="fas fa-trash"></i> 删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="pagination-container">
            <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[5, 10, 20, 50]"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>

        <div class="footer">
            楼宇管理系统 © 2023 - 版权所有
        </div>
    </div>
    <div>

        <!-- 弹窗组件 -->
        <el-dialog
                v-model="dialogVisible"
                title="新增楼宇"
                width="500px"
                :before-close="cancel">
            <div class="form-container">

                <el-form
                        :model="form"
                        :rules="rules"
                        ref="formRef"
                        label-width="80px"
                        label-position="left">
                    <el-form-item label="楼宇名称" prop="buildingName">
                        <el-input
                                v-model="form.buildingName"
                                placeholder="请输入楼宇名称"
                                clearable>
                            <template #prefix>
                                <i class="fas fa-building"></i>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="单元" prop="location">
                        <el-input
                                v-model="form.location"
                                placeholder="请输入单元号"
                                clearable>
                            <template #prefix>
                                <i class="fas fa-door-open"></i>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="备注" prop="remark">
                        <el-input
                                v-model="form.remark"
                                type="textarea"
                                :rows="3"
                                placeholder="请输入备注信息"
                                maxlength="100"
                                show-word-limit>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel">
                        <i class="fas fa-times"></i> 取消
                    </el-button>
                    <el-button type="primary" @click="onSubmit">
                        <i class="fas fa-check"></i> 确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</div>


<script>
    const {createApp, ref, computed, onMounted} = Vue;
    const {ElMessage, ElMessageBox} = ElementPlus;
    createApp({
        setup() {
            // 模拟数据

            const paginatedBuildings = ref([]);
            const buildings = ref([]);
            const selectedBuildings = ref([]);
            const searchQuery = ref('');
            const currentPage = ref(1);
            const pageSize = ref(4);
            const total = ref(0);
            const title = ref("新增/修改楼房信息");
            const dialogVisible = ref(false);
            const form = ref({});


            // 初始化数据
            onMounted(() => {
                getBuilding();
            });

            // 处理分页大小变化
            const handleSizeChange = (val) => {
                pageSize.value = val;
                getBuilding();
            };

            // 处理当前页变化
            const handleCurrentChange = (val) => {
                currentPage.value = val;
                getBuilding();
            };

            const getBuilding = () => {
                let url = searchQuery.value ? `/build/${currentPage.value}/${pageSize.value}/${searchQuery.value}` :
                    `/build/${currentPage.value}/${pageSize.value}`
                axios.get(url).then(resp => {
                    //将返回回来的集合数据赋值给表格绑定的数据源变量
                    //   resp.data   Result(obj:自己的集合数据)
                    console.log(resp.data)
                    buildings.value = resp.data.data.data;
                    total.value = resp.data.data.total;
                }).catch(error => {
                    console.log(error);
                    console.log("网络繁忙，请稍后再试")
                })

            }
            // 处理搜索
            const handleSearch = () => {
                currentPage.value = 1;
            };

            // const totalData = (msg) => {
            //     ElMessage.success(msg)
            //     getBuilding();
            //     form.value = {}
            //     dialogVisible.value = false
            // }

            // 处理新增
            const addBuilding = () => {

                title.value = ref("新增楼宇")
                dialogVisible.value = true
            }
            const onSubmit = () => {
                if (formRef.value.validate(valid => {
                    if (valid) {
                        if (form.value.buildingId) {
                            // 修改路线
                            updateBuilding();
                        } else {
                            // 新增路线
                            axios.post("/build", form.value).then(resp => {
                                if (resp.data.code === 200) {
                                    console.log(resp.data)
                                    ElMessage.success(resp.data.msg);
                                    getBuilding();
                                    form.value = {}
                                    dialogVisible.value = false
                                }
                            }).catch(error => {
                                ElMessage.error(error.response.data.msg);
                            })
                        }
                    }
                })) ;


            }
            const formRef = ref(null);
            const rules = ({
                buildingName: [
                    {required: true, message: '请输入楼宇名', trigger: 'blur'},

                ],
                location: [
                    {required: true, message: '请输入单元名', trigger: 'blur'},
                ],
                remark: [
                    {required: true, message: '请输入备注', trigger: 'blur'},
                ],
            })
            // 处理修改
            const updateBuilding = () => {
                axios.put("/build", form.value).then(resp => {
                    // 判断resp.data 是否大于1，如果大于1 则修改成功，刷新页面，关闭弹窗
                    if (resp.data.code === 200) {
                        ElMessage.success(resp.data.msg);
                        getBuilding();
                        form.value = {}
                        dialogVisible.value = false
                    } else {
                        ElMessage.error(error.response.data.msg)
                    }
                })
            }
            // 处理编辑
            const handleEdit = (row) => {
                axios.get(`/build/getBuildingById/${row.buildingId}`)
                    .then(resp => {
                        form.value = resp.data.data;
                        dialogVisible.value = true; // 显示弹窗
                        title.value = ref("修改楼宇")
                    })
                    .catch(error => {
                        console.log(error);
                        ElMessage.error("获取信息失败")
                    })
            }

            // 处理删除
            const handleDelete = (row) => {
                ElMessageBox.confirm(`确定要删除楼宇 "${row.buildingName}" 吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',

                }).then(() => {
                    // let mid = row.buildingId;
                    axios.delete(`/build/${row.buildingId}`).then(resp => {
                        if (resp.data.code === 200) {
                            ElMessage.success(resp.data.msg);
                            getBuilding();
                        } else {
                            alert("删除失败")
                        }
                    }).catch(error => {

                        ElMessage.error(error.response.data.msg);
                    })
                })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: '取消删除',
                        })
                    })
            }
            //批量删除
            const ids2 = ref([]);
            const handleSelectionChange = (val) => {
                ids2.value = val.map(item => item.buildingId)
            }
            const deleteBuildings = () => {
                ElMessageBox.confirm(`确定要删除楼宇 吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',

                }).then(() => {
                    axios.post("/build/deleteBuildings", ids2.value)
                        .then(resp => {

                            // 判断resp.data 是否大于1，如果大于1 则修改成功，刷新页面，关闭弹窗
                            if (resp.data.code === 200) {
                                console.log(resp.data)
                                ElMessage.success(resp.data.msg)
                                getBuilding();
                            }
                        }).catch(error => {
                        console.log(JSON.stringify(error))
                        ElMessage.error(error.response.data.msg);
                    })


                })
                    .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消删除',
                    })
                })




            }

            const clearValid = () => {
                if (formRef && formRef.value) {
                    formRef.value.resetFields();
                }
            }
                const cancel = () => {
                    clearValid();
                    form.value = {}
                    dialogVisible.value = false
                }
                return {
                    buildings,
                    selectedBuildings,
                    searchQuery,
                    currentPage,
                    pageSize,
                    handleSearch,
                    addBuilding,
                    handleEdit,
                    handleDelete,
                    handleSizeChange,
                    handleCurrentChange,
                    total,
                    getBuilding, paginatedBuildings, dialogVisible, title, form, onSubmit
                    , formRef, rules, cancel, handleSelectionChange, deleteBuildings, updateBuilding
                };
            }
        }).use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    }).mount('#app');
</script>
</body>
</html>